<template>
	<view class="content">
		<!-- 顶部 -->
		<view class="top">
			<!-- 时间卡片 -->
			<view class="time box" style="display: flex;flex-direction: column;justify-content: center;">
				<view style="font-size: 38rpx;text-align: center;font-weight: 400;">{{timeInfo.time}}</view>
				<view class="flex" style="justify-content: space-around;font-size: 11rpx;">
					<view>{{timeInfo.date}}</view>
					<view>九月十一</view>
				</view>
			</view>


			<!-- 天气卡片 -->
			<view class="weather box flex" style="justify-content: space-around;">
				<view class="flex" @click="weatherState=!weatherState">
					<image :src="api.base+weather.weatherIcon" style="width: 50rpx;height: 50rpx;" mode=""></image>
					<view style="margin-left: 8rpx;">
						<view style="font-size: 15rpx;">{{weather.cityName}}</view>
						<view style="font-size: 11rpx;color: gray;">{{weather.weather}}/{{weather.currentTemperature}}°C
						</view>
					</view>
				</view>
				<view class="otherWether" v-if="weatherState">
					<view style="font-size: 15rpx;">空气质量：<text style="color:lightgreen">{{weather.airQuality}}</text>
					</view>
					<view class="">
						<view style="font-size: 11rpx;color: gray;">
							最低:{{weather.minTemperature}}°C/最高：{{weather.maxTemperature}}°C</view>
					</view>
				</view>
			</view>

			<!-- 空调 -->
			<view class="air box flex">
				<view class="air_left" style="width: 40%;padding: 10rpx;">
					<view>空调状态</view>
					<view class="flex" style="margin-top: 15rpx;">
						<image src="../../static/images/success_icon.png" style="width: 10rpx;height: 10rpx;" mode="">
						</image>
						<view style="font-size: 11rpx;">已启动</view>
					</view>
					<view style="font-size: 11rpx;color: gray;">温度:{{weather.currentTemperature}}°C</view>
				</view>
				<view class="flex">
					<image src="../../static/desktop/air_content.png" style="width: 100rpx;height: 100rpx;">
					</image>

				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onHide
	} from '@dcloudio/uni-app';
	onHide(e => {
		uni.setStorage({
			key: 'musicIndex',
			data: musicIndex.value
		})

	})

	import {
		api
	} from '../../../utils/api.js'
	import mqtt1 from '../../../utils/mqttUtil.js'
	let mqtt = new mqtt1()

	import req from '../../../utils/request.js'
	import {
		onMounted,
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	let popup = ref()
	let popup1 = ref()
	let weatherState = ref(false)
	let currentIndex = ref('')
	let addList = ref([{
			img: '../../static/desktop/add.png'
		},
		{
			img: '../../static/desktop/add.png'
		},
		{
			img: '../../static/desktop/add.png'
		},
		{
			img: '../../static/desktop/add.png'
		},
		{
			img: '../../static/desktop/add.png'
		},
	])
	let appList = ref([{
			app: "user",
			name: "用户中心",
			img: '../../static/images/basic_icon.png',
			url: "/pages/user/user"
		},
		{
			app: "video",
			name: "视频",
			img: '../../static/desktop/video.png',
			url: "/pages/video/video"
		},
		{
			app: "air",
			name: "空调",
			img: '../../static/desktop/airConditioner.png',
			url: "/pages/air/air"
		},
		{
			app: "weather",
			name: "天气",
			img: '../../static/desktop/weatherIcon.png',
			url: "/pages/weather/weather"
		},
		{
			app: "car",
			name: "车辆",
			img: '../../static/desktop/user.png',
			url: "/pages/car/car"
		},
		{
			app: "app",
			name: "应用市场",
			img: '../../static/desktop/application.png',
			url: "/pages/app/app"
		},
		{
			app: "on",
			name: "一键关机",
			img: '../../static/desktop/restingScreen.png',
			url: "/pages/on/on"
		},
	])
	onShow(e => {
		musicIndex.value = uni.getStorageSync('musicIndex') == null ? 0 : uni.getStorageSync('musicIndex')
		getMuiscList()
		getWeather('北京')
		getCarInfo()
		setInterval(e => {
			getTime()
		}, 500)
		mqtt.sendMes('page', 'music')
	})
	//接收mqtt消息
	uni.$on('update', res => {
		console.log(res.data);
		if (res.topic == 'can2android' || res.topic == "android2can") {
			switch (res.data.slice(0, 5)) {
				case '03,13':
					musicState.value = true
					break
				case '03,14':
					musicState.value = false
					break
				case '03,15':
					musicIndex.value -= 1
					break
				case '03,16':
					musicIndex.value += 1
					break
				case '03,17':
					musicSound.value = 0
					break
				case '03,18':
					musicSound.value = 1
					break

			}
		}
	})
	let timeInfo = reactive({
		date: '',
		time: ''
	})

	function getTime() {
		let date = new Date()
		timeInfo.date = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"
		timeInfo.time = (date.getHours() > 9 ? date.getHours() : '0' + date.getHours()) + ':' + (date.getMinutes() > 9 ?
			date.getMinutes() : '0' + date.getMinutes())
	}

	function singleClick(index) {
		currentIndex.value = index
		if (addList.value[index].url == null) {
			popup.value.open()
		} else {
			if (addList.value[index].app == 'on') {
				mqtt.sendMes('can2android', '03,12,02,00,00,00,00,00')
			}
			uni.navigateTo({
				url: addList.value[index].url
			})
		}
	}

	function longClick(index) {
		currentIndex.value = index
		if (addList.value[index].url != '') {
			popup1.value.open()
		}
	}

	function selectApp(item) {
		addList.value[currentIndex.value] = item
		popup.value.close()
	}

	function openDeputy() {

		mqtt.sendMes('page', addList.value[currentIndex.value].app)
		popup1.value.close()
	}
	//音乐
	let musicList = ref([])
	let musicInfo = ref({})
	let musicIndex = ref(0)
	let myAudio = uni.createInnerAudioContext()
	let musicState = ref(false)
	let playIcon = ref('../../static/images/mediaMusicPlay/play-panel.png')
	let musicSound = ref(1)
	let muteIcon = ref('../../static/images/mediaMusicPlay/adjustmentVolume.png')
	watch(musicIndex, (newValue, old) => {
		if (myAudio.src != '') myAudio.stop()
		musicInfo.value = musicList.value[newValue]
		myAudio.src = api.base + musicList.value[newValue].mediaUrl
		myAudio.play()
		musicState.value = true
	})
	watch(musicState, (newValue, old) => {
		if (newValue) {
			playIcon.value = '../../static/images/mediaMusicPlay/play.png'
			myAudio.play()
		} else {
			playIcon.value = '../../static/images/mediaMusicPlay/play-panel.png'
			myAudio.pause()
		}
	})
	watch(musicSound, (newValue, old) => {
		if (newValue == 1) {
			muteIcon.value = '../../static/images/mediaMusicPlay/adjustmentVolume.png'
		} else {
			muteIcon.value = '../../static/images/mediaMusicPlay/mute.png'
		}
		myAudio.volume = newValue
	})

	function next(num) {
		console.log('进来' + num);
		if ((musicIndex.value + num) < 0 || (musicIndex.value + num) > musicList.value.length - 1) {
			console.log('非法下标');
		} else {
			// musicIndex.value+=num
			let mes = num == 1 ? '16' : '15'
			console.log(mes);
			mqtt.sendMes('can2android', '03,' + mes + ",00,00,00,00,00,00")
		}
	}

	function play() {
		musicState.value = !musicState.value
		mqtt.sendMes('can2android', '03,' + (musicState.value ? '13' : '14') + ",00,00,00,00,00,00")
	}

	function mute() {
		musicSound.value = musicSound.value == 0 ? 1 : 0
		mqtt.sendMes('can2android', '03,' + (musicSound.value == 0 ? '17' : '18') + ",00,00,00,00,00,00")
	}

	function changeSound(e) {
		console.log(e);
		musicSound.value = e.detail.value
		mqtt.sendMes('can2android', '03,' + (musicSound.value == 0 ? '17' : '18') + ",00,00,00,00,00,00")
	}

	function getMuiscList() {
		req.get('/control/media/list?status=2').then(res => {
			console.log(res);
			musicList.value = res.rows
			musicInfo.value = res.rows[0]
			myAudio.src = api.base + res.rows[0].mediaUrl
		})

	}

	let weather = ref({})

	function getWeather(city) {
		req.get('/control/weather/list?cityName=' + city).then(res => {
			weather.value = res.rows[0]
			console.log(res);
		})
	}
	let carInfo = ref({})

	function getCarInfo() {
		req.get("/api/recharge/vehicle/selected").then(res => {
			if (res.code != 200) {
				uni.showModal({
					content: '检测登录状态已失效',
					confirmText: '登录',
					cancelText: '关闭',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/user/user"
							})
						}
					}
				})
			} else {
				carInfo.value = res.data
			}
		})
	}
	let current = ref(0)
	let total = ref(120)

	function formatTime(time) {
		let s = Math.floor(time % 60)
		let m = Math.floor(time / 60)
		return m + ':' + (s > 9 ? s : '0' + s)
	}

	function goCar() {
		uni.navigateTo({
			url: '/pages/car/car'
		})
	}

	function goMusic() {
		uni.navigateTo({
			url: '/pages/music/music'
		})
	}


	myAudio.onTimeUpdate(e => {
		current.value = myAudio.currentTime

	})
	myAudio.onEnded(e => {
		musicState.value = false
	})
	myAudio.onCanplay(res => {
		total.value = myAudio.duration
	})
	onHide(e => {
		musicState.value = false
	})
</script>

<style lang="scss">
	.content {
		background-image: url('../../static/images/bg.png');
		background-size: cover;
		width: 100%;
		height: 100%;
		display: flex;
		font-size: 13rpx;
		flex-direction: column;
		position: relative;
	}

	.flex {
		display: flex;
		align-items: center;

	}

	.top {
		display: flex;
		justify-content: space-around;
		width: 90%;
		margin: 3% auto;
		height: 20%;
		gap: 20rpx;
	}

	.time {
		flex: 1;
		padding: 10rpx; // 添加一些内边距以便更容易看到内容
		background-color: rgba(255, 255, 255, 0.7); // 设置背景颜色以确认元素存在
	}

	.box {
		background-color: rgba(255, 255, 255, 0.45);
		border-radius: 12rpx;
	}

	.weather {
		flex: 1.7;
	}

	.air {
		flex: 1.3;
	}

	.bottom {
		display: flex;
		justify-content: space-around;
		width: 90%;
		margin: 0 auto;
		height: 55%;
		gap: 20rpx;
		// border: 1rpx solid #ccc;
	}

	.music {


		flex: 1.2;
		padding: 3rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.map {
		flex: 1.2;
		background-image: url('../../static/desktop/map.png');

		height: 100%;
		background-size: 100% 100%;
	}

	.bottom_right {
		flex: 2;
		display: flex;
		flex-direction: column;


		.car {
			background-image: url('../../static/desktop/info.png');
			background-size: 100% 100%;
			flex: 2.5;
			width: 100%;
			display: flex;
			align-items: center;
			// justify-content: center;	



		}

		.menu {
			flex: 1;
			// background-image: url('../../static/desktop/app.png');
			// background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;

		}
	}

	.music_contorl {
		image {
			width: 25rpx;
			height: 25rpx;
		}

		justify-content: space-around;
		width: 80%;
		margin-top: 10rpx;
	}
</style>


